import React from 'react';
import { Menu, ConfigProvider, Message, Balloon } from '@teamix/ui';
import debounce from 'lodash.debounce';
import ListEmpty from 'atComponents/ListEmpty';
import ListLoading from 'atComponents/ListLoading';
import track from 'utils/track';
import { YunxiaoIcon, ButtonIcon } from '@alife/devops-ui';
import exceed from 'utils/apimap';
import PathEllipsis from 'components/pathEllipsis';
import utils from 'utils';
import intl from '../../../locale';
import KEYCODE from 'utils/keycode';
import { ENUM } from 'utils/constants';
import { getPathWithRootPath, navigateOpen } from 'utils/router';
// import track from 'utils/track';
import './index.scss';
const { ctrlKey, ctrlTxt } = ENUM.getOSKeyMap();

const colorMap = {
  opened: 'green',
  reopened: 'green',
  accepted: 'green',
  merged: 'gray',
  closed: 'red',
};

const iconMap = {
  opened: 'pull-request-line',
  reopened: 'pull-request-line',
  accepted: 'pull-request-line',
  merged: 'merge-line',
  closed: 'pull-request-closed-line',
};

export default class SearcherDropdown extends React.Component {
  constructor(props) {
    super(props);
    const inputtext = utils.getUrlSearchParam('inputtext');
    this.state = {
      recentSearchList: [],
      searchText: inputtext || '',
      projects: [],
      merge_requests: [],
      groups: [],
      loading: true,
      activeKey: 'all',
      searchBtnActive: true,
      goAdvancedSearchItems: [
        {
          id: 1,
          active: true,
          type: 'goAdvancedSearchItems',
        },
      ],
    };
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyCodeEvent);
    this.doSearch(true);

    // 初次调用接口不需要 debounce，后续需要
    this.doSearch = debounce(this.doSearch, 200);

    track({
      action: 'search',
      page: 'Ceiling',
    });
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyCodeEvent);
  }

  inputonFocus = () => {
    const inputElement = document.getElementById('tb-navigation-searcher-input');
    const inputText = document.getElementsByClassName('search-bar-mask-text')[0];
    inputElement.onfocus = () => {
      inputText.innerText = '，“Enter”查看全部搜索结果';
      this.hiddenLoading();
    };
    inputElement.onblur = () => {
      inputText.innerText = '搜索当前企业';
    };
  };

  addSearchHistory(data) {
    return new Promise((resolve, reject) => {
      exceed
        .fetch({
          api: 'search.add_search_history',
          data,
        })
        .then((result) => {
          resolve(result.result);
        })
        .fail((err) => {
          reject(err);
        });
    });
  }

  handleKeyCodeEvent = (e) => {
    const flag =
      document.querySelector('.yx-overlay-wrapper')?.getAttribute('class') ===
      'yx-overlay-wrapper opened';
    // mac command || window ctrl
    if (flag) {
      if (e[ctrlKey] && e.keyCode === KEYCODE.ENTER) {
        this.selectProjectValue('targe_open');
        return false;
      }
      // 上箭头
      if (e.keyCode === KEYCODE.UP_ARROW) {
        this.selectProjectValue('up');
        return false;
      }
      // 下箭头
      if (e.keyCode === KEYCODE.DOWN_ARROW) {
        this.selectProjectValue('down');
        return false;
      }
      //  enter
      if (e.keyCode === KEYCODE.ENTER) {
        this.selectProjectValue('enter');
        return false;
      }
    }
  };

  selectProjectValue = (type) => {
    const { projects } = this.state;
    const { goAdvancedSearchItems } = this.state;
    const all = goAdvancedSearchItems.concat(projects);
    const ids = all.findIndex((va) => va.active);
    if (type === 'up' || type === 'down') {
      const newArray = all.map((va, index) => {
        if (type === 'up' && ids === -1 && index === all.length - 1) {
          return { ...va, active: true };
        } else if (type === 'up' && ids === 0 && index === all.length - 1) {
          return { ...va, active: true };
        } else if (type === 'up' && ids > -1 && index === ids - 1) {
          return { ...va, active: true };
        } else if (type === 'down' && ids === -1 && index === ids + 1) {
          return { ...va, active: true };
        } else if (type === 'down' && ids === 0 && index === ids + 1) {
          return { ...va, active: true };
        } else if (type === 'down' && ids >= all.length - 1 && index === 0) {
          return { ...va, active: true };
        } else if (type === 'down' && ids > -1 && index === ids + 1) {
          return { ...va, active: true };
        } else {
          return { ...va, active: false };
        }
      });
      this.setState(
        {
          projects: newArray.filter((v) => v.type !== 'goAdvancedSearchItems') || [],
          goAdvancedSearchItems: newArray.filter((v) => v.type === 'goAdvancedSearchItems'),
        },
        () => {
          this.isHidder();
        },
      );
    } else if (type === 'enter') {
      const value = projects.find((va) => va.active);
      if (value) {
        this.enterAndOpen('enter', value);
      } else {
        // 选择的是前往高级搜索
        const index = goAdvancedSearchItems.findIndex((va) => va.active);
        if (index === 0) {
          this.jumpSearch();
        } else if (index === 1) {
          this.jumpSearchOther();
        }
      }
    } else if (type === 'targe_open') {
      const value = projects.find((va) => va.active);
      this.enterAndOpen('targe_open', value);
    }
  };

  isHidder = () => {
    const { projects, goAdvancedSearchItems } = this.state;
    if (goAdvancedSearchItems.some((v) => v.active)) return;
    if (projects && projects.length > 0) {
      const dom = document.querySelector('.codeup_search_menu_list .active');
      if (dom) {
        const viewPort = document.querySelector('.codeup_search_menu_list');
        const viewPortHeight = viewPort.clientHeight;
        const { offsetTop } = dom;
        const { scrollTop } = viewPort;
        const top = offsetTop - scrollTop;
        if (top > viewPortHeight) {
          viewPort.scrollTop += 36;
        } else if (top === viewPortHeight) {
          viewPort.scrollTop += 36;
        } else if (top < 0) {
          viewPort.scrollTop = offsetTop;
        }
      }
    }
  };

  enterAndOpen = (type, data) => {
    const { searchText } = this.state;
    const dataTyep = data?.type;
    if ((!dataTyep || dataTyep === undefined || dataTyep === null) && searchText) {
      const value = this.state.searchText;
      window.location.href = `${window.location.protocol}//${
        window.location.host
      }/search?inputtext=${encodeURIComponent(value)}`;
    }
    if ((dataTyep === 'project' || dataTyep === 'groups') && type === 'enter') {
      window.location.href = `${window.location.protocol}//${window.location.host}${getPathWithRootPath(`/${data.path_with_namespace}`)}`;
    } else if ((dataTyep === 'project' || dataTyep === 'groups') && type === 'targe_open') {
      navigateOpen(
        `${window.location.protocol}//${window.location.host}${getPathWithRootPath(`/${data.path_with_namespace}`)}`,
      );
    } else if (dataTyep === 'merge_requests' && type === 'enter') {
      const { pathname: repopath } = new URL(data.web_url);
      window.location.href = `${window.location.protocol}//${window.location.host}${getPathWithRootPath(`/${repopath}`)}/merge_request/${data.id}`;
    } else if (dataTyep === 'merge_requests' && type === 'targe_open') {
      const { pathname: repopath } = new URL(data.web_url);
      navigateOpen(
        `${window.location.protocol}//${window.location.host}${getPathWithRootPath(`/${repopath}`)}/merge_request/${data.id}`,
      );
    }
  };

  toggleTab = (key) => {
    this.setState({
      activeKey: key,
    });
  };

  doSearch() {
    const { searchText } = this.state;
    if (searchText.length > 999) {
      this.setState({
        projects: [],
      });
      return Message.error('搜索内容长度超过限制，请修改后在试');
    }
    const { pathResource, organization } = window.FORCE;
    this.setState({
      loading: true,
    });

    const isInGroup =
      pathResource &&
      pathResource.id &&
      pathResource.type &&
      pathResource.type.toLowerCase() === 'group';

    let mrGroupExtraParams = {};
    let projectsGroupExtraParams = {};
    if (isInGroup) {
      mrGroupExtraParams = {
        group_ids: pathResource.id,
      };

      projectsGroupExtraParams = {
        namespace_id: pathResource.id,
      };
    }

    const promises = [
      exceed.fetch({
        api: isInGroup ? 'groups.all.subprojects' : 'projects.exploreList',
        data: {
          search: this.state.searchText,
          per_page: 5,
          ...projectsGroupExtraParams,
        },
      }),

      exceed.fetch({
        api: 'mr.ceiling.search',
        data: {
          ...mrGroupExtraParams,
          search: this.state.searchText,
          per_page: 5,
          order_by: 'updated_at',
        },
      }),

      exceed.fetch({
        api: 'groups.all.list',
        data: {
          page: 1,
          per_page: 5,
          order_by: 'updated_at',
          parent_id: isInGroup ? pathResource.id : organization.namespace_id,
          search: this.state.searchText,
          ceiling_search: true,
        },
      }),
      exceed.fetch({
        api: 'search.user_search_history',
      }),
    ];

    Promise.all(promises)
      .then((results) => {
        results[0].shift();
        results[1].shift();
        results[2].shift();
        results[3].shift();
        const resultsone = results[0].map((va) => {
          return { ...va, type: 'project', active: false };
        });
        const resultTwo = results[1].map((va) => {
          return { ...va, type: 'merge_requests', active: false };
        });
        const resultTherr = results[2].map((va) => {
          return { ...va, type: 'groups', active: false };
        });
        const resultHistory = results[3].map((va) => {
          return { ...va, type: 'history', active: false };
        });
        this.setState({
          recentSearchList: resultHistory,
        });
        const projects = [...resultsone, ...resultTwo, ...resultTherr];
        const projectValue = projects.length > 10 ? projects.slice(0, 10) : projects;
        this.setState({
          projects: projectValue.map((va) => {
            return { ...va, active: false };
          }),
          loading: false,
        });
      })
      .catch((err) => {
        console.error(err);
      });
    return promises;
  }

  onChange = (value) => {
    const { type } = window.FORCE.pathResource;
    this.setState(
      {
        searchText: value,
        goAdvancedSearchItems:
          value && type
            ? [
                {
                  id: 1,
                  active: true,
                  type: 'goAdvancedSearchItems',
                },
                {
                  id: 2,
                  active: false,
                  type: 'goAdvancedSearchItems',
                },
              ]
            : [
                {
                  id: 1,
                  active: true,
                  type: 'goAdvancedSearchItems',
                },
              ],
      },

      () => {
        this.doSearch();
      },
    );
  };

  renderEmpty = () => {
    return (
      <ListEmpty
        imgType="search"
        desc={intl.get({
          id: 'code-assets.initNavigation.searcher.dropdown.NoSearchResults',
          defaultMessage: '无搜索结果',
        })}
      />
    );
  };

  showSearchBtnActive = () => {
    this.setState({
      searchBtnActive: false,
    });
  };

  hiddenSearchBtnActive = () => {
    this.setState({
      searchBtnActive: true,
    });
  };

  renderRecentSearchList = () => {
    const { recentSearchList } = this.state;
    return (
      <Menu.Group label={''} key="searchList" style={{ display: 'none' }}>
        {recentSearchList &&
          recentSearchList.slice(0, 5).map((item) => (
            <Menu.Item
              key={item.id}
              className={item.active ? 'active' : null}
              // 有闪动bug，直接注释了
              // onMouseEnter={this.showSearchBtnActive}
              // onMouseOut={this.hiddenSearchBtnActive}
              onClick={() => {}}
            >
              {this.renderRecentSearchListHander(item)}
            </Menu.Item>
          ))}
      </Menu.Group>
    );
  };
  renderRecentSearchListHander = (item) => {
    const typeSelect = (historyType) => {
      let iconType = 'search-line';
      switch (true) {
        case historyType === 'mr':
          iconType = 'pull-request-line';
          break;
        case historyType === 'project':
          iconType = 'code-basement-line';
          break;
        case historyType === 'group':
          iconType = 'folder-line';
          break;
        default:
          iconType = 'a-advancesearch';
          break;
      }
      return iconType;
    };
    return (
      <a
        href={
          item.historyType === 'search'
            ? `${window.location.origin}/search?inputtext=${item.queryString}&is_dsl=${item?.extInfo?.is_dsl}`
            : item.jumpUrl
        }
        target="_self"
        rel="noreferrer"
        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}
        className="render_list_item"
      >
        <>
          <span className="search-repo-icon codeup_search_icon">
            <YunxiaoIcon type={typeSelect(item.historyType)} />
          </span>
          <PathEllipsis path={item.queryString} style={{ width: 226 }} />
        </>
        <span
          className="render_list_item_icon"
        >
          <a
            href={
              item.historyType === 'search'
                ? `${window.location.origin}/search?inputtext=${item.queryString}&is_dsl=${item?.extInfo?.is_dsl}`
                : item.jumpUrl
            }
            target="_blank"
            rel="noreferrer"
          >
            <ButtonIcon name="signout-line" />
          </a>
        </span>
      </a>
    );
  };
  renderProjects = () => {
    const { projects, searchText } = this.state;
    return (
      <Menu.Group label={''} key="projects" style={{ display: 'none' }}>
        {projects &&
          projects.slice(0, 5).map((item) => (
            <Menu.Item
              key={`projects:${item.id}-${item.type}`}
              className={item.active ? 'active' : null}
              // onMouseEnter={this.showSearchBtnActive}
              // onMouseOut={this.hiddenSearchBtnActive}
              onClick={() => {
                if (item.type === 'project') {
                  this.addSearchHistory({
                    history_type: item.type,
                    jump_url: item.web_url,
                    query_string: item.name,
                  });
                  track({ action: 'search_for_repo', page: 'Ceiling' });
                } else if (item.type === 'merge_requests') {
                  this.addSearchHistory({
                    history_type: 'mr',
                    jump_url: item.detail_url,
                    query_string: item.title,
                  });
                  track({ action: 'search_for_mr', page: 'Ceiling' });
                } else if (item.type === 'groups') {
                  this.addSearchHistory({
                    history_type: 'group',
                    jump_url: item.web_url,
                    query_string: item.name,
                  });
                  track({ action: 'search_for_repo', page: 'Ceiling' });
                } else {
                  this.addSearchHistory({
                    history_type: 'search',
                    jump_url: item.web_url,
                    query_string: item.name,
                  });
                }
              }}
            >
              {this.renderTypeHander(item.type, item)}
            </Menu.Item>
          ))}
        {searchText && projects && projects.length > 0 && projects.length > 9 && (
          <Menu.Item onClick={this.jumpSearch}>
            <YunxiaoIcon type="more-line" style={{ paddingRight: 13, marginLeft: 5 }} />
            查看更多
          </Menu.Item>
        )}
      </Menu.Group>
    );
  };

  renderTypeHander = (type, item) => {
    if (type === 'project') {
      return (
        <a
          href={`/${item.path_with_namespace}`}
          target="_self"
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}
          rel="noreferrer"
          className="render_list_item"
        >
          <>
            <span className="search-repo-icon codeup_search_icon">
              <YunxiaoIcon type="code-basement-line" />
            </span>
            <PathEllipsis
              path={utils.getGroupPath(item.name_with_namespace || item.title)}
              style={{ width: 226 }}
            />
          </>
          <span className="render_list_item_icon">
            <ButtonIcon
              name="signout-line"
              onClick={(e) => {
                this.enterAndOpen('targe_open', item);
                e.preventDefault();
              }}
            />
          </span>
        </a>
      );
    } else if (type === 'merge_requests') {
      const { pathname: repopath } = new URL(item.web_url);
      return (
        <a
          href={`${repopath}/merge_request/${item.id}`}
          target="_blank"
          rel="noreferrer"
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}
          className="render_list_item"
        >
          <>
            <span className="search-repo-icon codeup_search_icon">
              <YunxiaoIcon
                type={iconMap[item.state]}
                style={{ color: `${colorMap[item.state]}` }}
              />
            </span>
            <PathEllipsis path={item.title} style={{ width: 226 }} />
          </>
          <span
            className="render_list_item_icon"
            onClick={() => this.enterAndOpen('targe_open', item)}
          >
            <ButtonIcon name="signout-line" />
          </span>
        </a>
      );
    } else if (item.type === 'groups') {
      return (
        <a
          href={`/${item.path_with_namespace}`}
          target="_blank"
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}
          rel="noreferrer"
          className="render_list_item"
        >
          <>
            <span className="search-group-icon codeup_search_icon">
              <YunxiaoIcon type="folder-line" />
            </span>
            <PathEllipsis
              path={utils.getGroupPath(item.name_with_namespace)}
              style={{ width: 226 }}
            />
          </>
          <span
            className="render_list_item_icon"
            onClick={() => this.enterAndOpen('targe_open', item)}
          >
            <ButtonIcon name="signout-line" />
          </span>
        </a>
      );
    }
    this.hiddenLoading();
  };

  renderGroups = () => {
    const { groups, searchText, activeKey } = this.state;

    if (!groups.length && (!searchText || activeKey === 'all')) {
      return null;
    }
    if (!groups.length && searchText) {
      return this.renderEmpty();
    }

    return (
      <Menu.Group label="" key="groups" style={{ display: 'none' }}>
        {groups.map((item) => (
          <Menu.Item
            key={`groups:${item.id}`}
            onClick={() => {
              track({
                action: 'search_for_repo',
                page: 'Ceiling',
              });
            }}
          >
            <a
              href={`/${item.path_with_namespace}`}
              target="_blank"
              style={{ display: 'flex', alignItems: 'center' }}
              rel="noreferrer"
            >
              <span className="search-group-icon">
                <YunxiaoIcon type="folder-line" />
              </span>
              <PathEllipsis
                path={utils.getGroupPath(item.name_with_namespace)}
                style={{ width: 226 }}
              />
            </a>
          </Menu.Item>
        ))}
      </Menu.Group>
    );
  };

  renderMRs = () => {
    const { merge_requests, searchText, activeKey } = this.state;

    if (!merge_requests.length && (!searchText || activeKey === 'all')) {
      return null;
    }
    if (!merge_requests.length && searchText) {
      return this.renderEmpty();
    }

    return (
      <Menu.Group label={''} key="mrs" style={{ display: 'none' }}>
        {merge_requests.map((item) => {
          // TODO 这接口要改对
          const { pathname: repopath } = new URL(item.web_url);
          return (
            <Menu.Item
              key={`merge_requests:${item.id}`}
              onClick={() => {
                track({
                  action: 'search_for_mr',
                  page: 'Ceiling',
                });
              }}
            >
              <a href={`${repopath}/merge_request/${item.id}`} target="_blank" rel="noreferrer">
                <YunxiaoIcon
                  type={iconMap[item.state]}
                  style={{ marginRight: 6, color: `${colorMap[item.state]}` }}
                />

                {item.title}
              </a>
            </Menu.Item>
          );
        })}
      </Menu.Group>
    );
  };

  renderActiveTab = () => {
    const { activeKey } = this.state;
    if (activeKey === 'all') {
      return (
        <Menu size="small" autoFocus={false}>
          {this.renderProjects()}
          {this.renderGroups()}
          {this.renderMRs()}
        </Menu>
      );
    }
    if (activeKey === 'projects') {
      return (
        <Menu size="small" autoFocus={false}>
          {this.renderProjects()}
        </Menu>
      );
    }

    if (activeKey === 'groups') {
      return (
        <Menu size="small" autoFocus={false}>
          {this.renderGroups()}
        </Menu>
      );
    }

    return (
      <Menu size="small" autoFocus={false}>
        {this.renderMRs()}
      </Menu>
    );
  };

  goAdvancedSearch = () => {
    const value = this.state.searchText;
    const { type } = window.FORCE.pathResource;
    const { goAdvancedSearchItems } = this.state;
    let activeIndex = 0;
    if (goAdvancedSearchItems) {
      const index = goAdvancedSearchItems.findIndex((v) => v.active);
      if (index !== -1) {
        activeIndex = index;
      } else {
        activeIndex = null;
      }
    }

    return (
      <React.Fragment>
        <div
          className={`go_advanced_search ${this.state.searchBtnActive ? 'active' : ''}`}
          onClick={this.jumpSearch}
        >
          <span className="go_advanced_icon_conent">
            <YunxiaoIcon
              type="search-line"
              style={{ paddingRight: 5, color: 'var(--color-fill1-6, #8b8b8b)', marginLeft: 2 }}
            />{' '}
            <span className="go_advanced_search__flag_point">前往高级搜索</span>
            <span className="go_advanced_search_value">{value}</span>
          </span>
          {type && value && (type === 'GROUP' ? <span className="search_tag">组内</span> : <span className="search_tag">库内</span>)}
        </div>
        {type && value && (
          <div
            className={`go_advanced_search go_advanced_two_searcj ${
              activeIndex === 1 ? 'active' : ''
            }`}
            onClick={this.jumpSearchOther}
          >
            <span className="go_advanced_icon_conent">
              <YunxiaoIcon type="search-line" style={{ paddingRight: 5 }} />{' '}
              <span className="go_advanced_search__flag_point">前往高级搜索</span>
              <span className="go_advanced_search_value">{value}</span>
            </span>
            {type && value && <span className="search_tag">全部库</span>}
          </div>
        )}
      </React.Fragment>
    );
  };

  jumpSearchOther = () => {
    const value = this.state.searchText;
    if (value && value.length > 999) {
      return Message.error('搜索内容长度超过限制，请修改后在试');
    }
    track({
      action: 'go_to_advanced_search',
      page: 'Repo-Page',
      type: 'Ceiling',
      control: 'in_orgnization',
    });
    navigateOpen(`/search?inputtext=${encodeURIComponent(value)}&headerselectvalue=all`);
  };

  jumpSearch = () => {
    const { type, fullPath } = window.FORCE.pathResource;
    const value = this.state.searchText;
    const filter = utils.getUrlSearchParam('filter') || '{}';
    const filterObj = JSON.parse(filter);
    filterObj.type = 'code';
    if (type === 'GROUP') {
      const groupPath = fullPath.split('/').pop();
      filterObj.regexp = `${groupPath}/.*`;
    }
    const filterStr = JSON.stringify(filterObj);
    if (value && value.length > 999) {
      return Message.error('搜索内容长度超过限制，请修改后在试');
    }

    track({
      action: 'go_to_advanced_search',
      page: 'Home-Page',
      type: 'Ceiling',
      control: type ? 'in_repo' : '',
    });
    navigateOpen(
      `/search?inputtext=${encodeURIComponent(value)}&searchcodestorehousedata=${
        type ? fullPath : ''
      }&filter=${encodeURIComponent(filterStr)}&is_dsl=false`,
    );
  };

  codeSearchHander = () => {
    return (
      <div className="codeup_search_menu_bottom">
        <span>↓ ↑ 选择</span>
        <span>Enter 打开</span>
        <span>{ctrlTxt} + Enter 新窗口打开</span>
      </div>
    );
  };
  render() {
    const { projects, loading, recentSearchList } = this.state;
    if (loading) {
      return (
        <div className="history-overlay">
          <ListLoading prefix="yx-" style={{ padding: '12px 0px' }} />
        </div>
      );
    }
    return (
      <div className="history-overlay">
        <ConfigProvider prefix="yx-">
          <React.Fragment>
            {projects && this.goAdvancedSearch()}
            <div className="codeup_search_menu_list">
              {projects && (
                <Menu size="small" autoFocus={false}>
                  {recentSearchList.length > 0 && !this.state.searchText && (
                    <Menu.Group
                      style={{ marginTop: '8px' }}
                      label={
                        <div
                          style={{
                            width: '100%',
                            display: 'flex',
                            justifyContent: 'space-between',
                            justifyItems: 'center',
                          }}
                        >
                          <span>搜索历史</span>
                          <Balloon.Tooltip
                            trigger={
                              <YunxiaoIcon
                                onClick={() => {
                                  exceed
                                    .fetch({
                                      api: 'search.clear_user_search_history',
                                    })
                                    .then((result) => {
                                      if (result) {
                                        this.doSearch();
                                      }
                                    })
                                    .fail((err) => {
                                      console.log(err);
                                    });
                                }}
                                type="delete-line"
                                style={{
                                  cursor: 'pointer',
                                  color: 'var(--color-fill1-6, #8b8b8b)',
                                  marginTop: '8px',
                                  marginRight: '-2px',
                                }}
                              />
                            }
                            align="tl"
                          >
                            删除搜索历史
                          </Balloon.Tooltip>
                        </div>
                      }
                    >
                      {[].map(() => {
                        return <Menu.Item />;
                      })}
                    </Menu.Group>
                  )}
                  {!this.state.searchText && this.renderRecentSearchList()}
                  {!this.state.searchText && (
                    <Menu.Group style={{ marginTop: '8px' }} label={<span>最近操作</span>}>
                      {[].map(() => {
                        return <Menu.Item />;
                      })}
                    </Menu.Group>
                  )}
                  {this.renderProjects()}
                </Menu>
              )}
            </div>
            {this.codeSearchHander()}
          </React.Fragment>
        </ConfigProvider>
      </div>
    );
  }
}
